<template>
    <el-container class="chat-container">
        <el-aside width="400">
            <ChatSessionList @changeSession="changeSession" :applicationId="applicationId" :sessionId="sessionId" />
        </el-aside>
        <el-main style="padding: 0;">
            <ChatBox :applicationId="applicationId" :sessionId="sessionId" />
        </el-main>
    </el-container>
</template>

<script>
import ChatBox from '@/components/chat/ChatBox.vue';
import ChatSessionList from '@/components/chat/ChatSessionList.vue';

export default {
    components: {
        ChatBox,
        ChatSessionList
    },
    props: {
        applicationId: {
            type: [Number, String],
            required: true
        },
        sessionId: {
            type: [Number, String],
            default: -1
        }
    },
    data() {
        return {
        };
    },
    mounted() {
        // console.log('Component mounted,', this.$route.params, this.applicationId);
    },
    methods: {
        changeSession(session) {
            this.$router.push({ name: 'AiChat', params: { applicationId: this.applicationId }, query: { sessionId: session.id } });
        },
    }
};
</script>

<style scoped lang="scss">
.chat-container {
    display: flex;
    height: 100vh;

    .el-aside {
        border-right: 1px solid #eee;
    }

    .el-main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
}
</style>
